<template>
  <el-container class="details-container">
    <el-header height="70px">
      <Navigation />
    </el-header>

    <el-main style="padding-top:70px;">
      <Label />
      <!-- 培训 -->
      <div class="train">
        <div class="container">
          <div class="train-title">
            <h1>懒精灵涂料招商加盟</h1>

          </div>
        </div>
      </div>

      <!-- 加盟前景 -->
      <div class="train-content">

        <div class="container">
          <p class="p-content">艺术涂料最早起源于欧洲，先进的工艺也由欧洲蔓延开来。
            懒精灵艺术涂料在欧洲文艺复兴美学体系里建立涂料美学库，并成立懒精灵设计师联盟、全国工匠会员中心。是中国艺术涂料品牌里首个实现艺术墙艺”一体化”的品牌。加盟懒精灵，为4.9亿户家庭提供健康守护，共享千亿市场。</p>
          <p class="p-title">艺术涂料前景：从涂料到艺术涂料正当时</p>
          <div class="train-box">
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/join01.jpg" alt="">
              <div class="train-text">
                <p class="p-color">消费升级</p>
                <p class="p-color">CONSUMPTION UPGRADE</p>
                <p>消费升级促生消费的个性化和时尚化,定制是一个正在形成的风口。</p>
              </div>

            </div>
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/join02.jpg" alt="">
              <div class="train-text">
                <p class="p-color">市场蓝海</p>
                <p class="p-color">MARKET BLUE SEA</p>
                <p>新房装修与旧房翻修均将对墙面装饰，带来一个持续放大的市场需求。</p>
              </div>
            </div>
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/join03.jpg" alt="">
              <div class="train-text">
                <p class="p-color">碳中和与环保意识</p>
                <p class="p-color">ENVIRONMENTAL AWARENESS</p>
                <p>居民环保意识提高，追求更高的居室环保安全标准。</p>
              </div>
            </div>
            <div class="train-card">
              <img src="https://img.xnxx.mengcreate.com/LJL/join04.jpg" alt="">
              <div class="train-text">
                <p class="p-color">国货品牌</p>
                <p class="p-color">DOMESTIC BRANDS</p>
                <p>行业爆品缺位，国际质量、国潮品牌的机会。</p>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 加盟流程 -->
      <div class="train-path">
        <div class="container">
          <p class="title">加盟流程</p>
          <div class="train-stop">
            <h1>一站式加盟开店服务</h1>
            <p>One-stop franchise shop service</p>
          </div>
        </div>
      </div>

      <!-- 加盟支持 -->
      <div class="train-support">
        <div class="container">
          <p class="title">运营支持</p>
          <div class="train-lan">
            <img src="@/assets/images/join/lang.png" alt="">
          </div>
          <div class="train-stop">
            <div class="train-row">
              <div class="train-content">
                <h1>01</h1>
                <p>提供门店选择分析指导服务</p>
                <h1>02</h1>
                <p>定期邀请行业大咖做经营策略培训，微店主持续充电</p>
              </div>
              <div class="border"></div>
            </div>
            <div class="train-row">
              <div class="train-content">
                <h1>03</h1>
                <p>定期开设施工培训班，不断优化团队技能</p>
                <h1>04</h1>
                <p>定期开设导购培训班，不断提升导购能力、销售能力</p>
              </div>
              <div class="border"></div>
            </div>
            <div class="train-row">
              <div class="train-content">
                <h1>05</h1>
                <p>专属设计师提供统一风格的门店装修设计服务</p>
                <h1>02</h1>
                <p>专属物流产品配送店面陈列</p>
              </div>
              <div class="border"></div>
            </div>
            <div class="train-row">
              <div class="train-content">
                <h1>07</h1>
                <p>公司统一策划全年促销活动，提供物料设计</p>
                <h1>08</h1>
                <p>懒精灵设计师联盟，行业内用户库联动</p>
                <h1>09</h1>
                <p>驻店指导</p>
              </div>
              <!-- <div class="border"></div> -->
            </div>
          </div>
        </div>
      </div>

      <!-- 运营支持 -->
      <div class="train-support2">
        <div class="container">
          <div class="support2-content">
            <p class="title">加盟支持</p>
            <h2>八年实战干货，<br> 价值百万的懒精灵运营支持工具箱，<br>6大板块指导，业绩无忧</h2>
          </div>
          <img src="https://img.xnxx.mengcreate.com/LJL/describe.png" alt="">
        </div>
      </div>

      <!-- 在线报名 -->
      <div class="signUp">
        <div class="container">
          <div class="signUp-content">
            <p class="p-border">我要报名</p>
            <div class="signUp-title">
              <h2>在线咨询</h2>
              <p>点击在线咨询,每周一至周五，上午9点至下午5点，<br>培训招生客服提供培训在线问题解答。</p>
            </div>
            <div class="signUp-form">
              <h2>现在报名</h2>
              <p>提交报名资料，1个工作日内招生专人对接报名服务工作</p>
              <div class="signUp-input">
                <el-form :model="dataForm" ref="addFormRef" :rules="addFormRules" label-position="top"
                  label-width="70px">
                  <el-form-item label="您的称呼*" prop="username">
                    <el-input v-model="dataForm.name"></el-input>
                  </el-form-item>
                  <el-form-item label="联系电话*" prop="phone">
                    <el-input v-model="dataForm.phone"></el-input>
                  </el-form-item>
                  <el-form-item label="电子邮件*" prop="email">
                    <el-input v-model="dataForm.email"></el-input>
                  </el-form-item>
                </el-form>
                <el-button type="primary" style="margin-bottom:20px" @click="JoinAdd">提交</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>

    </el-main>

    <el-footer style="padding:0;">
      <Footer style="background-color:#000000;" />
    </el-footer>

  </el-container>
</template>

<script>
// components
//common
import Navigation from '@/components/common/navigation/Navigation2.vue'
import Footer from '@/components/common/footer/Footer.vue'
// import Footer from '@/components/common/footer/Footer.vue'
import Label from '@/components/common/label/Label3.vue'
import './base.css'
import { postJoinAdd } from '@/api/data'
export default {
  components: {
    Navigation,
    Footer,
    Label,
  },
  data () {
    // 验证邮箱的规则
    var checkEmail = (rule, value, cb) => {
      const regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      if (regEmail.test(value)) {
        //合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的邮箱'))
    }

    //验证手机号的规则
    var checkMobile = (rule, value, cb) => {
      const regMobile = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/

      if (regMobile.test(value)) {
        //合法邮箱
        return cb()
      }
      cb(new Error('请输入合法的手机号'))
    }
    return {
      dataForm: {
        name: "",
        phone: "",
        email: ""
      },
      addFormRules: {
        name: [
          { required: true, message: '请输入用户名称', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        email: [
          { required: true, message: '请输入用户邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '请输入用户手机号', trigger: 'blur' },
          { validator: checkMobile, trigger: 'blur' }
        ]
      },
    }
  },
  methods: {
    async JoinAdd () {
      this.$refs.addFormRef.validate(async (valid) => {
        if (!valid) return
        //校验成功后发起添加用户的网络请求
        const { data: res } = await postJoinAdd(this.dataForm)
        if (res.meta.status !== 200) return this.$message({
          type: 'error',
          message: '添加用户失败',
          offset: 100
        })
        this.$message.success({
          message: '添加用户成功',
          type: 'success',
          offset: 100
        })
      })
    }
  },
}
</script>

<style lang='less' scoped>
.details-container {
  position: relative;
  .el-header {
    position: fixed;
    top: 00px;
    z-index: 10000;
    left: 50%;
    transform: translate(-50%, 0%);
    width: 100%;
    display: flex;
    align-items: center;
  }
}
.el-header {
  background-color: var(--color-background);
}

.el-main {
  padding: 0;
  background: #f8f8f8;
  .train {
    background: url("../../assets/images/join/train4.png") no-repeat;
    background-size: cover;
    height: 240px;
    .container {
      .train-title {
        padding-top: 3rem;
        color: #fff;
        h1 {
          color: #065f46;
        }
      }
    }
  }
  .train-content {
    .container {
      .p-content {
        font-size: 1rem;
        line-height: 1.6rem;
      }
      .p-title {
        color: #23886c;
        font-weight: 500;
        border-bottom: 1px solid #23886c;
        display: inline-block;
        padding-bottom: 0.5rem;
      }
      .train-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        .train-card {
          background: #fff;
          width: 280px;
          img {
            width: 280px;
          }
          .train-text {
            padding: 0rem 1rem 0;
            .p-color {
              color: #23886c;
              font-weight: 500;
              font-size: 1.2rem;
              line-height: 1rem;
            }
            p {
              line-height: 1.6rem;
            }
          }
        }
      }
    }
  }
  .train-path {
    background: url(https://img.xnxx.mengcreate.com/LJL/train5.png);
    background-size: cover;
    background-position: center;
    height: 84vh;
    .container {
      .title {
        color: #74b828;
        font-weight: 500;
        border-bottom: 1px solid #74b828;
        display: inline-block;
        padding-bottom: 0.5rem;
        margin-top: 50px;
      }
      .train-stop {
        text-align: center;
        color: #fff;
        h1 {
          line-height: 1.5rem;
        }
        p {
          color: #74b828;
        }
      }
    }
  }
  .train-support {
    background: url(../../assets/images/join/bg1.png);
    height: 84vh;
    .container {
      .title {
        color: #74b828;
        font-weight: 500;
        border-bottom: 1px solid #74b828;
        display: inline-block;
        padding-bottom: 0.5rem;
        margin-top: 50px;
      }
      .train-lan {
        text-align: center;
        margin-bottom: 20px;
      }
      .train-stop {
        display: flex;
        padding: 0 50px 60px;
        .train-row {
          display: flex;
          justify-content: space-around;
          .train-content {
            width: 60%;
            margin-right: 30px;
            h1 {
              color: #74b828;
              line-height: 0.6rem;
            }
            p {
              font-size: 1.1rem;
              margin-bottom: 40px;
            }
          }
          .border {
            height: 70%;
            width: 2px;
            background: #23886c;
          }
        }
      }
    }
  }
  .train-support2 {
    position: relative;
    height: 84vh;
    overflow: hidden;
    .container {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
      display: flex;
      .support2-content {
        .title {
          color: #74b828;
          font-weight: 500;
          border-bottom: 1px solid #74b828;
          display: inline-block;
          padding-bottom: 0.5rem;
          margin-top: 50px;
        }
        h2 {
          margin-top: 7rem;
          font-size: 2rem;
          color: #23886c;
          line-height: 3rem;
        }
      }
      img {
        margin-top: 5rem;
        margin-left: 1rem;
      }
    }
  }
  .train-support2::before {
    content: "";
    position: absolute;
    width: 100vw;
    height: 100vw;
    background: #e8ecdf;
    border-radius: 50%;
    left: -50%;
    top: -50%;
    transform: translate(0%, -26%);
  }
  .signUp {
    background: url(https://img.xnxx.mengcreate.com/LJL/shinei1.png) no-repeat;
    height: 750px;
    overflow: hidden;
    .container {
      color: #fff;
      .signUp-content {
        .p-border {
          border-bottom: 1px solid #fff;
          display: inline-block;
          font-weight: 500;
          padding-bottom: 0.4rem;
        }
        .signUp-title {
          margin-bottom: 3rem;
          p {
            line-height: 2rem;
          }
        }
        .signUp-form {
          .signUp-input {
            display: flex;
            flex-direction: column;
            .el-input {
              margin: 10px 0;
              width: 25%;
              input {
                background: transparent !important;
              }
            }
            .el-button {
              width: 10%;
            }
            .el-button:hover {
              background: #fff !important;
              color: #74b828 !important;
              border: #74b828 !important;
            }
          }
        }
      }
    }
  }
}
@media only screen and (max-width: 786px) {
  .container-label {
    padding: 1rem 20px !important;
  }
  .container {
    max-width: 786px;
    width: 100%;
    padding: 0 20px;
    overflow: hidden;
    .train-box {
      flex-direction: column;
    }
  }
  .el-main {
    .train-content {
      .container {
        .train-box {
          .train-card {
            width: 100%;
            margin-bottom: 20px;
            img {
              width: 100%;
            }
          }
        }
      }
    }
    .train-support {
      height: 100vh;
    }
    .train-support2 {
      height: 100vh;
      .container {
        flex-direction: column;
      }
    }
    .signUp {
      .container {
        .signUp-content {
          .signUp-form {
            .signUp-input {
              .el-input {
                width: 50%;
              }
              .el-button {
                width: 25%;
              }
            }
          }
        }
      }
    }
  }
}
</style>